<template>
  <div class="py-3 px-2 bg-[var(--base-table-header-bg-color)]">
    <div
      class="flex justify-start items-center mb-2 w-[520px]"
      v-for="(item, index) in list"
      :key="index"
    >
      <!-- <template v-if="index < 3 && !item.delete"> -->
      <VGroup class="items-center" v-if="type == 'goods_sku_sell_month'">
        <SelectCountryV2
          class="!w-[150px]"
          v-model="item.country"
          placeholder="国家"
          multiple
          :disabled="disabled"
        ></SelectCountryV2>
        <VGroup class="items-center">
          <el-select
            class="!w-[80px]"
            v-model="item.hot_sell_start_month"
            collapse-tags
            placeholder="开始"
            clearable
            :disabled="disabled"
            @change="changeHotSell($event, item)"
          >
            <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span class="px-2">至</span>
          <el-select
            class="!w-[80px]"
            v-model="item.hot_sell_end_month"
            collapse-tags
            placeholder="结束"
            clearable
            :disabled="disabled || !item.hot_sell_start_month"
            @change="changeHotSell($event, item)"
          >
            <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input class="!w-[120px]" v-model="item.remark" placeholder="备注" />
        </VGroup>
        <div class="w-20 flex ml-2" v-if="!disabled">
          <svg-icon class="w-4 mt-2 icon icon-color" @click="add()" icon-class="add03" />
          <svg-icon
            class="w-4 mt-2 icon mr-3 ml-3"
            @click="del(item, index)"
            icon-class="jian"
          />
        </div>
      </VGroup>
      <VGroup v-if="type == 'custom_specification'">
        <el-input
          v-model.trim="item.name"
          clearable
          placeholder="规格"
          :disabled="disabled"
          class="!w-[212px]"
        />
        <el-input
          v-model.trim="item.value"
          clearable
          placeholder="规格值"
          :disabled="disabled"
          class="!w-[212px]"
        />
        <div class="w-20 flex ml-2" v-if="!disabled">
          <svg-icon class="w-4 mt-2 icon icon-color" @click="add()" icon-class="add03" />
          <svg-icon
            class="w-4 mt-2 icon ml-3"
            @click="del(item, index)"
            icon-class="jian"
          />
        </div>
      </VGroup>
      <VGroup v-if="type == 'goods_sku_authentication'">
        <SelectCountryV2
          class="!w-[236px]"
          v-model="item.country"
          placeholder="国家"
          multiple
          :disabled="disabled"
        ></SelectCountryV2>
        <el-select
          v-model="item.authentication_type"
          placeholder="认证类型"
          filterable
          clearable
          @change="changeAuthentication($event, item)"
          :disabled="disabled"
          class="!w-[220px]"
        >
          <el-option
            v-for="item in options['goods.GoodsSpu']?.[0].authenticationText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div class="w-20 flex ml-2" v-if="!disabled">
          <svg-icon class="w-4 mt-2 icon icon-color" @click="add()" icon-class="add03" />
          <svg-icon
            class="w-4 mt-2 icon mr-3 ml-3"
            @click="del(item, index)"
            icon-class="jian"
          />
        </div>
      </VGroup>
      <VGroup v-if="type == 'goods_sku_prohibited_sales'">
        <SelectPlatformSite
          v-model:platform="item.platform_id"
          v-model:site="item.site_code"
          @changePlatform="changePlatform($event, index)"
          @changeSite="changeSite($event, index)"
          :disabled="disabled"
        >
        </SelectPlatformSite>
        <div class="w-20 flex ml-2" v-if="!disabled">
          <svg-icon class="w-4 mt-2 icon icon-color" @click="add()" icon-class="add03" />
          <svg-icon
            class="w-4 mt-2 icon mr-3 ml-3"
            @click="del(item, index)"
            icon-class="jian"
          />
        </div>
      </VGroup>
      <!-- </template> -->
    </div>
  </div>
</template>
<script setup>
import SelectCountryV2 from "@/components/Selects/SelectCountryV2/index.vue";
import { monthOptions } from "../../data.js";
import SelectPlatformSite from "@/components/SelectPlatformSite";
import { ElMessage } from "element-plus";

let options = reactive(inject("options"));
const emit = defineEmits(["update:modelValue"]);

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "",
  },
  operation_type: {
    type: String,
    default: "",
  },
});

const { disabled, type, operation_type } = toRefs(props);

const list = computed({
  get: () => {
    const data = props.modelValue || [];
    if (operation_type.value == "all") {
      return data || [];
    } else {
      return data.filter((item) => !item.delete).slice(0, 3);
    }
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const changeHotSell = (val, item) => {
  if (!val) {
    item.hot_sell_end_month = "";
    item.hot_sell_start_month = "";
  } else {
    if (!item.hot_sell_end_month) {
      item.hot_sell_end_month = val;
    }
    if (!item.hot_sell_start_month) {
      item.hot_sell_start_month = val;
    }
  }
};

// 增加一行
const add = () => {
  const newItem = {
    custom_specification: { name: "", value: "" },
    goods_sku_authentication: { country: [], authentication_type: null },
    goods_sku_prohibited_sales: { platform_id: "", site_code: "" },
    goods_sku_sell_month: {
      country: [],
      hot_sell_start_month: "",
      hot_sell_end_month: "",
      remark: "",
    },
  }[type.value];
  emit("update:modelValue", [newItem, ...(props.modelValue || [])]);
};
// 删除一行
const del = (item, index) => {
  if (list.value.filter((i) => !i.delete).length == 1) {
    ElMessage.error("至少保留一条数据");
    return;
  }
  const currentList = [...props.modelValue]; // 克隆当前数据

  if (item.id) {
    currentList[index].delete = 1;
  } else {
    currentList.splice(index, 1);
  }
  emit("update:modelValue", currentList); // 触发更新
};

const changeAuthentication = (val, row) => {
  const item = options.value["goods.GoodsSpu"]?.[0].authenticationText.find(
    (i) => i.value == val
  );
  row.authentication_name = item?.label;
};

const changePlatform = (val, index) => {
  form.value.goods_sku_prohibited_sales[index].platform_name = val;
};
const changeSite = (val, index) => {
  form.value.goods_sku_prohibited_sales[index].site_name = val;
};
</script>
<style lang="sass"></style>
